<template>
	<div class="item">
		<div class="div2">
			<router-link to="/mobile/home"><</router-link>
			<form @submit.prevent='setSearch()'>
				<input type="search" placeholder="请输入订单号" required v-model="key"/>
				<input type="submit" value="搜索" />
			</form>
		</div>
		<div class="box1">
			<ul>
				<li><a @click="add(-1)"  :class="set==-1?'act':''">全部订单</a></li>
				<li><a @click="add(0)"  :class="set==0?'act':''">待付款</a></li>
				<li><a @click="add(1)"  :class="set==1?'act':''">待收货</a></li>
				<li><a >待评价</a></li>
				<li><select v-model="days" @click="add(2)">
						<option value="0" >筛选</option>
						<option value="7" >7天以内</option>
						<option value="15">15天以内</option>
						<option value="30">30天以内</option>
						<option value="60">60天以内</option>
						<option value="120">120天以内</option>
					</select>
				</li>
			</ul>
		</div>
		<div class="box" >
			<ul   v-for="(item,i) in orders">
				<div class="header">
						<div class="h1">
							<img src="../../assets/img/mobile/屏幕截图 2024-01-06 234354.png">
							<h5>当当自营</h5>
						</div>
						<div class="h2">
						   <i class="el-icon-delete"></i>
						</div>	
					</div>
			<li v-for="(index,j) in item.items">
				<router-link :to="`/mobile/bookDteail/${index.book.id}`">
				<div class="show">
					<div class="img" >
						<img :src="`http://127.0.0.1/api/public/showimg/${index.book.pic}`">
					</div>
					<div class="sow">
						<p>{{index.book.name}}</p>
					    <span>x{{index.num}}</span>
					</div>
				</div>
				</router-link>
				</li>
				<aside class="right">
						<label>共件{{item.items.length}}商品</label>
						<span>实付: ￥{{item.amount}}</span>
					</aside>
					<div class="bth">
						<button v-show="  item.shipStatus == 2" >已收货</button>
						<button v-show="  item.shipStatus == 1" >已发货</button>
						<button v-show=" item.shipStatus == 0" @click="ship(item.ordid)">未收货</button>
						<button v-show="item.payStatus == 0"  @click="pay(item.ordid)">未支付</button>
						<button v-show=" item.payStatus == 1" >已支付</button>
					</div>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name:'MobileOrderitem',
		data() {
			return{
				set:-1,
				days:0,
				orders:[],
				total:0,
				key:'',
				order:{},
				lines:5,
				num:1,
				obj:{},
			}
		},
		computed:{
			
		},
		methods:{
			pay(id){
				this.$router.push({
					path:'/mobile/pay',
					query:{id:id},
				})
			},
			setSearch(){
				this.orders = [];
				console.log(this.key);
				let k = parseInt(this.key);
				this.$get('/api/fore/ord/findByOrdid/'+k).then((resp)=>{
					console.log(resp.data.data)
					if(resp.data.data == null){
						this.$message({
						message:'不存在该订单',
						type:'error'
						})
						this.add(-1);
						return;
					}
					this.orders.push(resp.data.data);
					
				})
			},
			ship(id){
				this.$message({
					message:'待开发',
					type:'success'
				})
			},
			add(type){
				this.obj = {};
				this.set = type;
				switch(type){
					case -1:
					this.obj = {
						days:15,
					};
					break;
					case 0:
					this.obj = {
						payStaus:0,
					};
					break;
					case 1:
					this.obj = {
						shipStaus:0,
					};
					break;
					case 2:
					this.obj = {
						days:this.days,
					};
					break;
				}
				this.get();
			},
			get(){
				this.orders = [];
				console.log(this.days);
				console.log(this.obj.payStatus);
				this.$postkv('/api/fore/ord/findPageOrders/'+this.num+'/'+this.lines,this.obj)
				.then((resp)=>{
						this.orders = resp.data.data.orders;
						this.total = resp.data.data.total;
						console.log(this.orders);
				})
			}
		},
		mounted() {
			this.add(-1);
		}
	}
</script>

<style scoped>
	a{
		color: black;
	}
	.item{
		width: 100%;
		background-color: #f6f6f6;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.item .div2{
		width: 100%;
		display: flex;
		align-items: center;
		height: 6.25rem;
		margin: 0 auto;
		background-color: white;
	}
	.item .div2 form{
		width: 85%;
	}
	.item .div2 form input[type="search"]{
		width: 80%;
		height: 2.5rem;
		border-radius: 10rem;
		border: none;
		text-indent: 0.9375rem;
		outline: none;
		background-color:  #f6f6f6;
	}
	.item .div2 form input[type="submit"]{
		font-size: 1rem;
		margin-left: 0.5rem;
		background-color: white;
		border: none;
	}
	.item .div2 a{
		font-size: 1.5rem;
		color: #282C28;
		margin-left: 1.25rem;
		margin-right: 1.25rem;
	}
	.item .box1{
		width: 100%;
		margin-bottom: 0.625rem; 
	}
	.item .box1 ul{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.item .box1 ul li{
		background-color: white;
		font-size: 0.8rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20%;
		height: 1.875rem;
	}
	.act{
		color: red;
	}
	.item .box1 ul li:nth-child(4){
		border-right: 0.0625rem solid gainsboro;
	}
	.item .box{
		width: 90%;
		margin: 0 auto;
	}
	.item .box ul{
		width: 100%;
		align-items: center;
		background-color: white;
		margin-bottom: 1rem;
		border-radius: 0.5rem;
		border: 0.0625rem solid gainsboro;
		box-shadow: 0 0 0.3rem 0 gainsboro;
	}
	.item .box ul li{
		font-size: 0.8rem;
		width: 100%;
		height: 6rem;
		margin-bottom: 0.625rem;
		margin-top: 0.625rem;
	}
	.item .header{
		display: flex;
		align-items: center;
		width: 100%;
		height: 20%;
		margin-top: 1rem;
	}
	.item .header img{
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 50%;
	}
	.item .header .h1{
		width: 25%;
		display: flex;
		
		align-items: center;
		justify-content: space-between;
		margin-left: 1rem;
	}
	.item .header .h2{
		display: flex;
		margin-left: 60%;
		align-items: center;
		justify-content: space-between;
	}
	.item .header span{
		display: flex;
		margin-right: 1.25rem;
	}
	.item .show{
		display: flex;
		width: 100%;
		height: 100%;
	}
	.item .show .img{
		height: 100%;
		width: 25%;
		border-radius: 0.5rem;
		border: 0.0625rem gainsboro solid;
		margin-left: 1.25rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item .show .img img{
		width: 60%;
		height: 80%;
	}
	.item .show .sow {
		width: 70%;
		height: 100%;
	}
	.item .show .sow p{
		font-size: 1.25rem;
		font-weight: 200;
		display: flex;
		width: 100%;
		margin-left: 0.625rem;
		margin-bottom: 1.25rem;
		word-break: break-all;
	}
	.item .show .sow span{
		margin-left: 1rem;
	}
	.item .right{
		width: 100%;
		height: 15%;
		display: flex;
		align-items: center;
	}
	.item .right label{
		margin-left: 50%;
		margin-right: 0.625rem;
	}
	.item .right span{
		font-weight: 600;
	}
	 .item .bth{
		 height: 25%;
		 margin-bottom: 1rem;
		 display: flex;
		 margin-left: 50%;
	 }
	 .item .bth button{
		 background-color: white;
		 border: 0.125rem solid red;
		 border-radius: 10rem;
		 width: 5rem;
		 margin-right: 0.625rem;
		 height: 1.875rem;
		 font-weight: 100;
		 margin-top: 0.625rem;
	 }
	  .item .box1 select{
		  width: 5rem;
		  border: none;
		  outline: none;
		  
	  }

</style>